<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .list{width:200px;background:#ccc;position: absolute;left:0;top:0;margin:0;padding:30px;display:none;}
    </style>
</head>
<body>
    文字文字文字文字
    <a href="http://www.baidu.com">跳转链接</a>
    <ul class="list">
        <li>选项1</li>
        <li>选项2</li>
        <li>选项3</li>
        <li>选项4</li>
        <li>选项5</li>
        <li>选项6</li>
    </ul>
</body>
<script>

    var list = document.querySelector(".list");

    document.oncontextmenu = function(eve){
        var e = eve || window.event;

        list.style.display = "block";
        list.style.left = e.pageX + "px"
        list.style.top = e.pageY + "px"

        // 正常
        // e.preventDefault();
        // IE低版本
        // e.returnValue = false;

        // 事件对象提供的阻止默认事件的兼容封装
        stopDefault(e);

        // 没有兼容性的阻止默认事件
        // return false;

        list.style.background = "pink";
    }
    
    document.onclick = function(){
        list.style.display = "none";
    }


    function stopDefault(e){
        if(e.preventDefault){
            e.preventDefault()
        }else{
            e.returnValue = false;
        }
    }
</script>
</html>